import MetadataForm from '@/comps/MetadataForm';
import { Button, Drawer, Form, message, Steps } from 'antd';
import { FormInstance } from 'antd/lib/form';
import React from 'react';
import { IMetaFileds } from '../type';
import MetaPropsEdit from './MetaPropsEdit';

interface IMetaFieldsEditProps {
  id: string;
  defaultValues?: any;
  onChange?: (values: any) => void;
}
const MetaFieldsEdit = (props: IMetaFieldsEditProps) => {
  const { id, defaultValues, onChange } = props;
  const [form] = Form.useForm();
  const [fields, setFields] = React.useState<IMetaFileds>({ id, type: 'object', properties: [], value: {} });

  const [isValue, setIsValue] = React.useState<boolean>(false);
  const [valueForm, setValueForm] = React.useState<FormInstance>();

  React.useEffect(() => {
    if (defaultValues) {
      console.log('defaultValues', defaultValues);
      form.setFieldsValue(defaultValues);
    }
  }, [defaultValues]);

  const onFinish = (values: any) => {
    const _fields = fields;
    if (values && values.properties && values.properties.length > 0) {
      _fields.properties = values.properties;
      setFields({ ...fields });
      setIsValue(true);
      console.log('values:', _fields, JSON.stringify(_fields));
    } else {
      message.warn('请添加任意属性');
    }
  };

  const onValueFinish = (values: any) => {
    const _fields = fields;
    _fields.value = values;
    setFields({ ...fields });
    console.log('values:', _fields, JSON.stringify(_fields));
    onChange && onChange(_fields);
  };

  return (
    <>
      <Form className="metadata-edit" style={{ position: 'relative' }} form={form} name="control-hooks" onFinish={onFinish}>
        <div style={{ padding: '10px' }}>
          <MetaPropsEdit name="properties" form={form} />
          <Form.Item>
            <Button type="primary" block htmlType="submit">
              {tr('确定')}
            </Button>
          </Form.Item>
        </div>

        <Drawer
          title="Value"
          style={{ position: 'absolute' }}
          bodyStyle={{ padding: '10px' }}
          height={500}
          placement="bottom"
          mask={false}
          onClose={() => {
            setIsValue(false);
          }}
          getContainer={false}
          visible={isValue}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button
                type="primary"
                style={{ marginTop: '10px' }}
                onClick={() => {
                  valueForm?.submit();
                }}
              >
                {tr('提交')}
              </Button>
            </div>
          }
        >
          <MetadataForm
            initialValues={defaultValues.value}
            getFormInstance={(valueform) => {
              setValueForm(valueform);
            }}
            schema={[fields]}
            onFinish={onValueFinish}
          />
        </Drawer>
      </Form>
    </>
  );
};

export default MetaFieldsEdit;
